*{
    /* 初始化 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background-color: #1f1f1f;
    /* 溢出隐藏 */
    overflow: hidden;
}
.container{
    width: 100%;
    height: 100%;
    /* 弹性布局 */
    display: flex;
}
.slide{
    /* 相对定位 */
    position: relative;
    /* 自动放大占满剩余空间 */
    flex: 1;
    height: 100%;
    overflow: hidden;
    /* 过渡效果 */
    transition: 1s;
}
.slide .image{
    width: 140%;
    height: 140%;
    /* 绝对定位，默认图片往左移出可视范围 */
    position: absolute;
    left: -140%;
    top: -20%;
    /* 保持原有尺寸比例，裁切长边 */
    background-size: cover;
    /* 定位背景图像为正中间 */
    background-position: center;
    /* 过渡 */
    transition: 1s;
    /* 执行动画：图片进入动画 时长 线性的 停留在最后一帧 */
    animation: imgIn 1.2s linear forwards;
}
/* 遮罩层 */
.slide .overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom,rgba(20,20,20,0.7),transparent);
    background-size: 100% 200%;
    background-position: 0 0;
    opacity: 1;
    transition: 0.5s;
}
.slide .content{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
/* 黑色标题 */
.slide .content h1{
    color: #3f3f3f;
    font-size: 48px;
    text-align: center;
    text-shadow: 0 2px 2px #2f2f2f;
    letter-spacing: 5px;
    text-indent: 5px;
    width: 100%;
    height: 65px;
    /* 默认隐藏 */
    opacity: 0;
    transition: 0.5s;
}
/* 黄色标题 */
.slide .content h1::after{
    /* 通过attr函数获取元素的data-title属性值 */
    content: attr(data-title);
    width: 100%;
    /* 默认高度为零，隐藏 */
    height: 0%;
    color: #fff59d;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    transition: 0.85s;
}
/* 接下来是鼠标悬停的样式改变 */
.slide:hover .image{
    /* 图片变大 */
    transform: scale(1.1);
}
.slide:hover .overlay{
    /* 降低遮罩层的不透明度 */
    opacity: 0.4;
}
.slide:hover .content h1{
    /* 黑色标题显现并下移 */
    opacity: 1;
    transform: translateY(60px);
}
.slide:hover .content h1::after{
    /* 黄色标题显现 */
    height: 100%;
}

/* 定义动画 */
@keyframes imgIn {
    to{
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
}